<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>服务器控制台</title>
        <script src="/js/jquery-3.6.1.min.js"></script>
        <script src="/layer/layer.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            body {
                padding: 20px;
            }
            .btn-add-new {
                width: 150px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                color: #fff;
                background: #409eff;
                border-radius: 4px;
                margin-bottom: 20px;
                cursor: pointer;
            }
            .server-list {
            }
            .server-list ul {
                display: flex;
                flex-wrap: wrap;
                gap: 20px;
            }
            .server-list li {
                width: 230px;
                line-height: 34px;
                font-size: 14px;
                border: 1px solid #eee;
                border-radius: 4px;
                padding: 20px;
                box-sizing: border-box;
                list-style: none;
            }
            .server-list .btn-delete {
                width: 150px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                color: #fff;
                background: #f56c6c;
                border-radius: 4px;
                margin-top: 20px;
                cursor: pointer;
            }
            .form {
                padding: 30px 0 0 60px;
            }
            .form .item {
                margin-top: 15px;
            }
            .form .item:first-of-type {
                margin-top: 0;
            }
        </style>
    </head>
    <body>
        <div class="btn-add-new">新增服务器</div>
        <div class="server-list">
            <ul>
                <!-- <li>
                    <p>服务器ID：234243</p>
                    <p>服务器：国色天香</p>
                    <p>IP:127.0.0.1:134</p>
                    <div class="btn-delete">删除</div>
                </li> -->
            </ul>
        </div>
        <script>
            $(function () {
                function getServers() {
                    var $list = $(".server-list ul");
                    $list.empty();
                    $.get("/servers/control_list").done(function (res) {
                        if (res.code === "0000") {
                            res.servers.forEach(function (item) {
                                var url = `ws://${item.ip}:${item.env.port}`;
                                var html = `<li>
                                                <p>服务器ID：${item.id}</p>
                                                <p>名称：${item.name}</p>
                                                <p>地址:${url}</p>
                                                <div class="btn-delete" data-id="${item.id}">删除</div>
                                            </li>`;
                                $list.append(html);
                            });
                        }
                    });
                }
                getServers();

                $(".btn-add-new").on("click", function () {
                    var index = layer.open({
                        type: 1,
                        title: "请输入服务器信息",
                        btn: ["确定", "取消"],
                        area: ["420px", "240px"], //宽高
                        content: `<div class="form">
                                      <div class="item">
                                          <span>服务器名：</span>
                                          <input class="name" type="text" placeholder="请输入服务器名称" />
                                      </div>
                                      <div class="item">
                                          <span>服务器IP：</span>
                                          <input class="ip" type="text" placeholder="请输入服务器IP" />
                                      </div>
                                      <div class="item">
                                          <span>启动端口：</span>
                                          <input class="port" type="number" placeholder="请输入启动端口" />
                                      </div>
                                  </div>`,
                        yes() {
                            var name = $(".form .name").val();
                            var ip = $(".form .ip").val();
                            var port = $(".form .port").val();
                            console.log(name, port);
                            $.post("/servers/register", { name, ip, port }).done(function (res) {
                                layer.close(index);
                                layer.alert(res.message);
                                getServers();
                            });
                        },
                    });
                });
                $(".server-list ul").on("click", ".btn-delete", function () {
                    var id = $(this).data("id");
                    var index = layer.alert("确定删除此服务器吗？", {
                        btn: ["确定", "取消"],
                        yes() {
                            $.post("/servers/delete", { id }).done(function (res) {
                                layer.close(index);
                                layer.alert(res.message);
                                getServers();
                            });
                        },
                    });
                });
            });
        </script>
    </body>
</html>
